Graphics Design and Applied Arts บทท 6 การออกแบบเว บเบ องต น

Size: px

Start display at page:

Download "Graphics Design and Applied Arts บทท 6 การออกแบบเว บเบ องต น"

Jessie King
5 years ago
Views:

1 Graphics Design and Applied Arts บทท 6 การออกแบบเว บเบ องต น

2 Review of Web Technology Millions of web surfers who could potentially view our site have a wide variety of computer systems, then Colors and fonts display differently in different browsers, on different monitors, and on different systems. (Color and Typography) Elements on the page can t be guaranteed to display at a particular size, because different systems have different resolutions. 2

3 Review of Web Technology (cont d) Most brand new computers are not displaying at their best or highest settings. Designing a good web page is much trickier than designing a good printed page Because you cannot predict with any accuracy the system setup your visitors will have. 3

4 Review of Web Technology (cont d) Web Technology Client-side Technology Server-side Technology 4

5 Client-side technology In a web environment, a client consists of the visitor s computer (hardware) and the browser application (software) that displays a web page. Browser mission is to request, retrieve, and display documents (another term for web pages) for the visitor. 5

6 Client-side technology 6

7 Client-side technology Browser employs HTML/XHTML Cascading Style Sheets (CSS), Javascript, Flash, and Multimedia(audio and video) to render documents. 7

8 Client-side technology HTML/XHTML HTML: Hypertext Markup Language) A tag-based language used by web browsers to render text and images on the visitor s monitor. XHTML: extensible HyperText Markup Language A family of XML markup languages that mirror or extend versions of the widelyused Hypertext Markup Language (HTML) 8

9 Client-side technology Cascading Style Sheets (CSS) Define the visual presentation of a web page, including color, sizes, fonts, background images, borders, margins, underlines, and positioning. 9

10 Client-side technology HTML alone is static only display text and images. Scripting Languages: lite programming language. Accomplish tasks such as performing calculations, editing input data, or changing visual presentation on the fly. Two browser-based scripting languages: JavaScript and Microsoft s VBScript. 10

Multimedia: Audio/Video Common audio formats: MIDI (Musical

11 Client-side technology Adobe Flash Flash: as graphic-animation technology, but is now being used for entire web sites. Multimedia: Audio/Video Common audio formats: MIDI (Musical Instrument Digital Interface), WAV(Windows Waveform), and MP3 (MPEG Layer 3). 11

12 Client-side technology Multimedia: Audio/Video Common video formats AVI (Audio Video Interleaved), MPEG (Motion Picture Experts Group), MOV (QuickTime movie), and RealOne Player. 12

13 Server-side technology Web server refer to both server software (like the Apache web server) computer hardware upon which the server software runs. Web pages: Static Web Pages Data-driven Web Pages 13

14 Static Web Pages FIGURE 1: Client-Server Interaction: Static Web Page 14

15 Static Web Pages: Process 1. The client sends a request for a page to a web server using HTTP, (the client types in a URL) 2. The web server software requests and returns the requested HTML document as well as all associated CSS, JavaScript, and multimedia files. 3. The client displays the received files as a completed page. 4. The web server disconnects the client. Any future requests from the client are treated independently of any prior requests. 15

16 Data-driven Web Pages:Process FIGURE 2: Client-Server Interaction: Data-driven Web Page 16

17 Data-driven Web Pages: Process 1. The client sends a request for a page to a web server. The request usually includes embedded variables that give the server additional information about the request. Example: online purchase books from a web site 17

18 Data-driven Web Pages: Process 2. The web server passes control off to an application server (software and the computer it runs on). - In many cases, the application program retrieves and/or updates records from a database. 3. The application server passes control back to the web server, along with any information the web server needs (such as database records) to assemble the response page. 18

19 Data-driven Web Pages: Process 4. The web server merges the application program s data with the appropriate HTML file. 5. The client s web browser merges the received files and displays the completed page. 6. The web server disconnects the client. Any future requests from the client are treated independently of any prior requests. 19

Data is self-describing Ajax(Asynchronous JavaScript and XML) The art

20 New-additions to server-side technologies XML (Extensible Markup Language) A methodology for transporting data. Data is self-describing Ajax(Asynchronous JavaScript and XML) The art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

เอกสารอ างอ ง Wikipedia. http://en.wikipedia.org/wiki/ เข าถ งเม อ 30 ก.ค.

21 เอกสารอ างอ ง Wikipedia. เข าถ งเม อ 30 ก.ค McIntire, P. Visual Design for the Modern Web. New Riders

Lesson 5: Multimedia on the Web

Lesson 5: Multimedia on the Web Lesson 5 Objectives Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss